<template>
<div>
  <van-nav-bar
      title="美食列表"
      left-text="返回"
      left-arrow
      @click-left="tzback()"
  />
<!--  1.头部 可以排序-->
  <div>
    <input style="width: 75%" placeholder="请输入搜索美食的名字" id="i1" v-model="name"/><button @click="dw()">搜索</button>

    <van-dropdown-menu>
      <van-dropdown-item title="排序" v-model="gwhere.order" :options="orderops" />
      <van-dropdown-item title="条件" ref="item">
        <van-cell center title="包邮">
          <template #right-icon>
            <van-switch v-model="gwhere.baoyou" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <van-cell center title="促销">
          <template #right-icon>
            <van-switch v-model="gwhere.cuxiao" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <van-cell center title="降价">
          <template #right-icon>
            <van-switch v-model="gwhere.jiangjia" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <div style="padding: 5px 16px;">
          <van-button type="danger" block round @click="onConfirm">
            确认
          </van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>

  </div>
<!--  2.List 上拉分页-->
  <div>
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadData()"
    >
      <van-card v-for="f in foods"
                :tag="f.type"
                :price="f.price"
                :desc="f.site"
                :title="f.name"
                :thumb="f.imgurl"
          @click="tzdetail(f.id)"
      >
          <template #tags>
            <van-tag plain type="danger">浏览量 {{f.looknum}}</van-tag>
            <van-tag plain type="danger">评分值 {{f.lovenum}}</van-tag>
          </template>
          <template #footer>

            <van-button  @click="tzdetail(f.id)" size="mini" style="height: 2rem;background-color: crimson">查看详情</van-button>
          </template>
      </van-card>
    </van-list>
  </div>
</div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: "FoodsList",
  setup() {
    const item = ref(null);
    const onConfirm = () => {
      item.value.toggle();
    };
    return {
      item,onConfirm,
    }
  },
  data(){
    return{
      loading:false,
      finished:false,
      foods:[

      ],
      gwhere:{
        baoyou:false,
        cuxiao:false,
        jiangjia:false,
        order:"0"
      },
      orderops:[
        { text: '综合排序', value: 0 },
        { text: '热度排序', value: 1 },
        { text: '时间排序', value: 2 },
      ],
      name:"",
    }
  },methods:{
    tzback(){
      history.back();
    },
    loadData(){

      this.loading=true;
    },
    tzdetail(id){
      //跳转页面 传递参数 编程式路由 携带参数
      this.$router.push({path:"/foodeditview",query:{id:id}});
    },
    dw(){
      this.axios.get('/api/foods/byName.do?name='+this.name).then(res=>{
        this.foods = res.data.data;
        this.loading=true;
      })
    }

  }
}
</script>

<style scoped>

</style>